<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template</title>
</head>
<body>
    <say-hello></say-hello>
    <template id="sayHello">
        <h1>Hello Everyone</h1>
    </template>
    <script>
        class SayHello extends HTMLElement {
            constructor() {
                super();
                const shadowDOM = this.attachShadow({mode: 'open'});
                const templateDOM = document.getElementById('sayHello');
                const cloneTemplate = templateDOM.content.cloneNode(true);
                const style = document.createElement('style');
                style.innerHTML = `
                    h1{
                        color: #f498b2;
                    }
                `
                shadowDOM.appendChild(style);
                shadowDOM.appendChild(cloneTemplate);
            }
        }
        customElements.define('say-hello', SayHello);
    </script>
</body>
</html>